<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Food Facts Web</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/page.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script type="text/javascript" src="js/api.js"></script>
    <script type="text/javascript" src="js/page-create.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

        <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

        <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Food Facts Web Demo</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li><a href="index.html">成分分析</a></li>
            <li  class="active"><a href="create.html">食谱创建</a></li>
        </ul>
    </div>
    </div>
</nav>

<div class="container">
<div class="page-header">
     <h3>请输入您的要求，为您推荐合适的食谱：</h3>
</div>


<div class="row">
          <div class="col-md-3">
          <br>
            <div class="input-group">
              <span class="input-group-addon btn-primary">能量大于：</span>
                <input type="text" class="form-control" placeholder="卡路里，如1000" id="input-energy">
            </div>
            <br>
            <div class="input-group">
              <span class="input-group-addon btn-primary">脂肪小于：</span>
                <input type="text" class="form-control" placeholder="限制每天的脂肪量" id="input-fat">
            </div>
             <br>
            <div class="input-group">
              <span class="input-group-addon btn-primary">糖类小于：</span>
                <input type="text" class="form-control" placeholder="限制每天的糖类" id="input-sugar">
            </div>
            <br>
            <div class="input-group">
              <span class="input-group-addon btn-primary">蛋白小于：</span>
                <input type="text" class="form-control" placeholder="限制每天的蛋白" id="input-protein">
            </div>
            <br>
            <div class="input-group">
              <span class="input-group-addon btn-primary">盐类小于：</span>
                <input type="text" class="form-control" placeholder="限制每天的盐类" id="input-salt">
            </div>
            <br>
            <div class="input-group">
              <span class="input-group-addon btn-primary">国家：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <input type="text" class="form-control" value="United States" id="input-country"> 
            </div>
            <br>
            <center>
            <button class="btn btn-success" id="search-button">点击搜索</button>
            </center>
          </div>
          <div class="col-md-5">
          <div id="column-container" style="min-width:400px;height:400px"></div>
          </div>
          <div class="col-md-4">
          <div class="well well-lg container-fluid"  style="height: 400px;overflow-y:scroll;" id="menu-display">
          </div>
          </div>
</div>

</div>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" style="display: none;">
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="modal-error-msg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          &times;
        </button>
        <h4 class="modal-title" id="myModalLabel">
          错误
        </h4>
      </div>
      <div class="modal-body" id="error-msg">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
        </button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal -->
</div>
</body>
</html>